<!DOCTYPE html>
<html>
<head lang="zh-cn">
	<link href="$!{__beat.server.contextPath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="$!{__beat.server.contextPath}/bootstrap/datepicker/datepicker3.css" rel="stylesheet">
    <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/App.css" type="text/css" />
     <link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/css/font-awesome.min.css" type="text/css" />   
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/css/wnl.css">
    <meta charset="UTF-8">
    <title>城市首页数据看板</title>
<style type="text/css">
    .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
        padding: 4px 2px;
        font-size:10px;
        vertical-align: middle;      
    }
</style>
    <meta charset="UTF-8">
    <title>城市首页数据看板</title>
</head>
<body>
<div class="container-fluid">

    <div class="row" align="center" style="margin-bottom:8px; margin-top:5px;">
                <form class="form-inline" action="$!{__beat.server.contextPath}/homePage/inventory" method="get">
                        <div class="form-group" style="width:180px">
                            <label for="cityName" style="padding-left:15px;">城市：</label>
                            <select id="cityName"  name="cityName" class="form-control">
                                 #foreach($c in $zhixiaoCityList)
                                    #if($velocityCount > 2)
                                    <option value="$c" #if("$!{cityName}" == "$c") selected #end>$c</option>
                                    #end
                                #end
                            </select>
                        </div>  
                        <div class="form-group" style="width:180px">
                            <label for="businessName" style="padding-left:15px;">业务线：</label>
                            <select id="businessName" name="businessName" class="form-control input-sm" style="align:center; width:100px; ">
                               <option value="all" #if("$!businessName" == "total") selected #end>总体</option>
                               #foreach($buss in $businessList)
                               #set($businessName_CN = $business_CN_Map.get("$buss"))
                                    <option value="$businessName_CN" #if("$!businessName" == "$!businessName_CN") selected #end>$businessName_CN</option>
                                #end
                            </select>
                        </div>  
                        <div class="form-group">                       
                               <input type="submit" value="查询" class="btn btn-primary btn-xs"> 
                        </div>
                </form>
    </div>
    <!-- 整体余额消耗变化趋势 -->

		<div class="datacontent" >
			<div class="dataTit">
				<i class="mark"></i><span>整体余额消耗变化趋势</span>
			</div>

			<div class="dataShow">
				<div id='balance_option' statType='day'>
					<div class="form-inline">
						<div class="form-group input-group input-group-sm"
							style="width: 20%; float: left">
							<span class="input-group-addon"> <input
								id="time_checkbox_balance" type="checkbox">
							</span> <input id="time_input_balance" type="text"
								class="form-control time" placeholder="添加对比" disabled>
						</div>	
						#if("$!businessName" == "总体"||"$!businessName" == "all"||"$businessName" == "招聘"||"$businessName" == "二手车")
						    <div class="form-group input-group-sm " style="margin-left: 190px;">
	                            <label for="proType">指标：</label>
								<select id="indexType" class="form-control"
									style="width: 120px; margin-left: 5px">
								   #foreach($index in $targetList)
	                                    <option value="$index">$index</option>
	                               #end
								</select>
						   </div>
						
						#else
								<div class="form-group input-group-sm col-md-offset-1">
									<label for="cateName">类别：</label> 
									<select id="balance_cate" class="form-control" style="width: 130px;">
										 <option value="all">全部</option>
										 #foreach($c in $cateList)
										    <option value="$c">$c</option> 
										 #end
									</select>
								</div>						    	  		
							<div class="form-group input-group-sm " >
	                            <label for="proType">指标：</label>
								<select id="indexType" class="form-control"
									style="width: 120px; margin-left: 5px">
								   #foreach($index in $targetList)
	                                    <option value="$index">$index</option>
	                               #end
								</select>
							</div>
				
						#end
						<button id="balance_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

						<div class="btn-group btn-group-sm btn-tab" style="float: right">
							<button type="button" class="btn btn-default active btn_balance"
								statType='day'>日</button>
							<button type="button" class="btn btn-default btn_balance"
								statType='week'>周</button>
							<button type="button" class="btn btn-default btn_balance"
								statType='month'>月</button>
						</div>
					</div>
				</div>

				<div>
					<div id="inventory_balance" style="height: 400px; margin-top: 30px"></div>
				</div>

				<div class="panel-group accordion" id="infoPanel">
					<div class="panel panel-default open">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse"
									data-parent=".accordion" href="#collapse_info"> 分类别余额消耗明细(点击展开) <span
									id="balanceTotalTable_date"></span>
								</a>
							</h4>
						</div>
						<div id="collapse_info" class="panel-collapse collapse"
							style="height: 0px;">
							<div class="panel-body">
								<table class="table table-bordered" id="balanceTotalTable">
									<thead>
										<tr>
											<th style="text-align: center">客户类别</th>
							
											<th style="text-align: center">总充值</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">总消耗</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">总余额</th>
											
											<th style="text-align: center">消耗周期</th>
											
											<th style="text-align: center">消耗率</th>											
											<th style="text-align: center">总客户数</th>											
											<th style="text-align: center">消费客户数</th>
											<th style="text-align: center">余额客户数</th>
											<th style="text-align: center">充值客户数</th>
											<th style="text-align: center">人均消耗</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">人均充值</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">人均余额</th>
											<th style="text-align: center">环比</th>
										</tr>
									</thead>

								</table>
							</div>
						</div>
					</div>

				</div>

			</div>
			<!-- dataShow  -->
		</div>
		<!-- datacontent  -->
		<!-- 整体余额消耗变化趋势 -->
		<!-- 分业务线变化趋势 -->
      #if("$!businessName" == "总体"||"$!businessName" == "all")
		<div class="datacontent" >
			<div class="dataTit">
				<i class="mark"></i><span>分业务线变化趋势</span>
			</div>

			<div class="dataShow">
				<div id='business_option' statType='day'>
					<div class="form-inline">
						<div class="form-group input-group input-group-sm"
							style="width: 20%; float: left">
							<span class="input-group-addon"> <input
								id="time_checkbox_business" type="checkbox">
							</span> <input id="time_input_business" type="text"
								class="form-control time" placeholder="添加对比" disabled>
						</div>
						<div class="form-group input-group-sm col-md-offset-1">
							<label for="cateName">客户类别：</label> <select id="business_cate"
								class="form-control" style="width: 130px;">
								<option value="2">全部</option>
								<option value="1">会员</option> 
                                <option value="0">非会员</option>
							</select>
						</div>
						<div class="form-group input-group-sm ">
                            <label for="business_index">指标：</label>
							<select id="business_index" class="form-control"
								style="width: 120px; margin-left: 5px">
							   #foreach($index in $targetList)
                                    <option value="$index">$index</option>
                               #end
							</select>
						</div>
						<button id="business_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>

						<div class="btn-group btn-group-sm btn-tab" style="float: right">
							<button type="button" class="btn btn-default active btn_business"
								statType='day'>日</button>
							<button type="button" class="btn btn-default btn_business"
								statType='week'>周</button>
							<button type="button" class="btn btn-default btn_business"
								statType='month'>月</button>
						</div>
					</div>
				</div>

				<div>
					<div id="inventory_business" style="height: 400px; margin-top: 30px"></div>
				</div>

				<div class="panel-group accordion" id="business_Panel">
					<div class="panel panel-default open">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse"
									data-parent=".accordion" href="#collapse_business">分业务线余额消耗明细-<span id="user_cate"></span>(点击展开)  <span
									id="businessTotalTable_date"></span>
								</a>
							</h4>
						</div>
						<div id="collapse_business" class="panel-collapse collapse"
							style="height: 0px;">
							<div class="panel-body">
								<table class="table table-bordered" id="businessTotalTable">
									<thead>
										<tr>
											<th style="text-align: center">业务线</th>
											<th style="text-align: center">总充值</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">总消耗</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">总余额</th>
											
											<th style="text-align: center">消耗周期</th>
											
											<th style="text-align: center">消耗率</th>											
											<th style="text-align: center">总客户数</th>											
											<th style="text-align: center">消费客户数</th>
											<th style="text-align: center">余额客户数</th>
											<th style="text-align: center">充值客户数</th>
											<th style="text-align: center">人均消耗</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">人均充值</th>
											<th style="text-align: center">环比</th>
											<th style="text-align: center">人均余额</th>
											<th style="text-align: center">环比</th>
										</tr>
									</thead>

								</table>
							</div>
						</div>
					</div>

				</div>

			</div>
			<!-- dataShow  -->
		</div>
		<!-- datacontent  -->
		<!-- 分业务线变化趋势 -->
       #end

        <!-- 总体会员漏斗 -->
		<div class="datacontent" >
			<div class="dataTit">
				<i class="mark"></i><span>#if("$!businessName" == "总体"||"$!businessName" == "all") 总体#else$!{businessName}#end会员漏斗</span>
			</div>

			<div class="dataShow">
				<div id='vip_option' statType='month'>
					<div class="form-inline">
				        			   
						<div class="form-group input-group input-group-sm "
							style="width: 20%; float: left">
							<span class="input-group-addon"> <input
								id="time_checkbox_vip" type="checkbox">
							</span> <input id="time_input_vip" type="text"
								class="form-control time" placeholder="点击选择查看月份" disabled value="">
						</div>	
						
							
					</div>
				</div>

				<div>
					<div id="inventory_vip" style="height: 500px; margin-top: 30px"></div>
				</div>
                <div class="panel-group accordion" id="vip_Panel">
					<div class="panel panel-default open">
						<div class="panel-heading">
							<h4 class="panel-title">
								<a class="accordion-toggle collapsed" data-toggle="collapse"
									data-parent=".accordion" href="#collapse_vip">会员漏斗明细数据(点击展开)  <span
									id="vipTotalTable_date"></span>
								</a>
							</h4>
						</div>
						<div id="collapse_vip" class="panel-collapse collapse"
							style="height: 0px;">
							<div class="panel-body">
								<table class="table table-bordered" id="vipTotalTable" style="text-align: center">
									<thead>
										<tr>
										    <th style="text-align: center">类型</th>
											<th style="text-align: center">会员量</th>
											<th style="text-align: center">新建</th>
											<th style="text-align: center">打包</th>
											<th style="text-align: center">打包开通</th>											
											<th style="text-align: center">打包未开通</th>
											<th style="text-align: center">裸开</th>
											<th style="text-align: center">充值</th>
											<th style="text-align: center">无充值</th>
											<th style="text-align: center">留存</th>
											<th style="text-align: center">有充值</th>										
											<th style="text-align: center">有充值开通</th>
											<th style="text-align: center">有充值未开通</th>
											<th style="text-align: center">无充值有消费</th>											
											<th style="text-align: center">有续充</th>
											<th style="text-align: center">无续充</th>
											<th style="text-align: center">非活跃</th>											
											
										</tr>
									</thead>

								</table>
							</div>
						</div>
					</div>

				</div>
				

			</div>
			<!-- dataShow  -->
		</div>
		<!-- datacontent  -->
		<!-- 整体会员漏斗 -->


        #if($!{businessName} !=  "总体" && $!{businessName} !=  "招聘"  && $!{businessName} !=  "二手车" )
       	<!-- 余额消耗率类别分布散点图 -->
		<div class="datacontent" >
			<div class="dataTit">
				<i class="mark"></i><span>$!{businessName}余额消耗率类别分布</span>
			</div>

			<div class="dataShow">
				<div id='consumeRate_option' statType='month'>
					<div class="form-inline">
						
						<label for="beginDate_consumeRate">时间: </label>
                    	<div class="form-group input-group input-group-sm" style="width: 10%;">
                        <input id="beginDate_consumeRate" type="text"  class="form-control input-sm time" placeholder="选择时间" value="$!maxDate_consumeRate"/>
                    	</div>

						<div class="form-group input-group-sm col-md-offset-1" >
							<label for="vipType_consumeRate" style="margin-left:50px">客户类别：</label> 
							<select id="vipType_consumeRate" class="form-control" style="width: 100px;">
								<option value="2">全部</option>
								<option value="1">会员</option> 
                                <option value="0">非会员</option>
							</select>
						</div>
						<div class="form-group input-group-sm" >
							<label for="indexType_consumeRate" style="margin-left:10px">坐标组合：</label> 
							<select id="indexType_consumeRate" class="form-control" style="width: 160px;">
								<option value="1">充值——消耗率</option>
								<option value="2">消耗——消耗周期</option> 
							</select>
						</div>

						<button id="refresh_consumeRate_btn" type="button" class="btn btn-default form-control input-sm">刷新</button>
					</div>
				</div>

				<div>
					<div id="inventory_consumeRate" style="height: 400px; margin-top: 30px"></div>
				</div>
			</div>
			<!-- dataShow  -->
		</div>
		<!-- datacontent  -->
		<!-- 余额消耗率类别分布散点图 -->
		#end
</div>

</body>
<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<link rel="stylesheet" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.css" type="text/css" /> 
<link type="text/css" href="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.css" rel="stylesheet" />
<script src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="$!{__beat.server.contextPath}/bootstrap/libs/jquery-ui/jquery.multiselect.js"></script>

<script src="$!{__beat.server.contextPath}/bootstrap/js/libs/bootstrap.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/bootstrap-datepicker.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/nongLiDate.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/dist/echarts.js"></script>
<script src="$!{__beat.server.contextPath}/js/common/chart-util.js"></script>
<script src="$!{__beat.server.contextPath}/bootstrap/js/App.js"></script>
<script type="text/javascript">
	var dayMap={1:"周一",2:"周二",3:"周三",4:"周四",5:"周五",6:"周六",0:"周日"};
	var datepicker_op={
	    format: "yyyy-mm-dd",
	    clearBtn: false,
	    language: "zh-CN",
	    autoclose: true,
	    todayHighlight: true,
	    minViewMode:0,
	    orientation: "top left"
	};
	
	function getDate(yyyymmdd){
		console.log(yyyymmdd.length);
	    if(yyyymmdd.length==10){        //yyyy-MM-dd
	        return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)+'/'+yyyymmdd.substr(8,2));
	    }else if(yyyymmdd.length==8){   //yyyyMMdd
	        return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2)+'/'+yyyymmdd.substr(6,2));
	    }else if(yyyymmdd.length==6){    //yyyyMM
	        return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(4,2));
	    }else if(yyyymmdd.length==7){         //yyyy-MM
	    	return Date.parse(yyyymmdd.substr(0,4)+'/'+yyyymmdd.substr(5,2)); 
	    }
	}

    //获取星期几 dayDate 的格式为 yyyy-MM-dd
    function getWeekDay(dayDate){
        var jsDate = new Date(Date.parse(dayDate.replace(/\-/g,'/')));
        var weekNumber = jsDate.getDay();
        return dayMap[weekNumber];
    }
    function setDatePicker(ec,dateGrp,input){
        if('week'==dateGrp){
        }else if('month'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyymm';
        }else{
            datepicker_op.minViewMode=0; 
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        //获取显示的日期数组
        var days_show=ec.getShowDays();
        var days_all=ec.getAllDays();
        //设置时间可选范围
        input.datepicker('setStartDate',new Date(getDate(days_all[0])));
        input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-1])));
    }
    
    function setDatePicker_v1(ec,dateGrp,input){
        if('week'==dateGrp){
        }else if('month'==dateGrp){
            datepicker_op.minViewMode=1;
            datepicker_op.format='yyyymm';
        }else{
            datepicker_op.minViewMode=0; 
            datepicker_op.format='yyyy-mm-dd';
        }
        input.datepicker('remove');
        input.datepicker(datepicker_op);
        // //获取显示的日期数组
         var days_show=ec.getShowDays();
         var days_all=ec.getAllDays();
        //设置时间可选范围
         input.datepicker('setStartDate',new Date(getDate(days_all[0])));
         input.datepicker('setEndDate',new Date(getDate(days_all[days_all.length-days_show.length])));
    }
    
    function changeDateGrp(item){
        var stat_type = $(item).attr('statType');
        var curDiv = $(item).closest('div[statType]');
        $(curDiv).attr('statType',stat_type);
    }

    function changeIndex(item){
        var indexVal = $(item).val();
        var curDiv = $(item).closest('div[statType]');
        $(curDiv).attr('indexType',indexVal);
    }

    $('.btn-tab button').click(function(e){
        $(this).addClass('active');
        $(this).siblings('button').each(function(){
            $(this).removeClass('active');
        });
    });
   
 
    // 路径配置
    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/js/homePage"}});
    
    var charts = [];

     //整体余额消耗变化趋势
     require(['dashboard/inventory_balance_v1'],function(inventoryEC){
         charts.push(inventoryEC);
         inventoryEC.show(2);
     });
     var is_all = "$!{businessName}"
     if(is_all == "all"||is_all == "总体"){
	     //分业务线变化趋势
	     require(['dashboard/inventory_business_v2'],function(inventoryBusinessEC){
	         charts.push(inventoryBusinessEC);
	         inventoryBusinessEC.show(2);
	     });
     }

     
   //总体会员漏斗
     require(['dashboard/inventory_vip_v2'],function(inventoryVipEC){
	         charts.push(inventoryVipEC);
	         inventoryVipEC.show(2);
	 }); 

 	//余额消耗率类别分布散点图
 	#if($!{businessName} !=  "总体" && $!{businessName} !=  "招聘"  && $!{businessName} !=  "二手车" )
	     require(['dashboard/consumeRate_v3'],function(consumeRateEC){
	         charts.push(consumeRateEC);
	         consumeRateEC.show(2);
	     }); 
     #end

    $(window).resize(function(){
        $.each(charts,function(i,n){
            n.resize();
        });
    });


</script>
</html>